<!-- 用户管理 -->
<template>
<div class="user-list-wp com-main com-table-wp" v-loading="loadInterface > 0" element-loading-text="拼命加载中">
  <com-search :form="form" @search="search()">
    <template slot-scope="scope">
      <el-form-item label="登录账号" prop="username">
        <el-input v-model="form.username" clearable></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="form.sex" placeholder="请选择性别" clearable>
          <el-option v-for="(item, index) in $store.state.dict.sex" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <template v-if="scope.advanced">
        <el-form-item label="用户昵称" prop="realname">
          <el-input v-model="form.realname" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择用户状态" clearable>
            <el-option v-for="(item, index) in $store.state.dict.accountStatus" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </template>
    </template>
  </com-search>

  <div class="com-hd-box">
    <el-button size="small" icon="el-icon-plus" type="primary" @click="$refs.userInfo.open(1)">添加用户</el-button>
    <el-button size="small" icon="el-icon-upload2" type="primary">导入</el-button>
    <el-button size="small" icon="el-icon-download" type="primary">导出</el-button>
    <el-dropdown v-show="selection.length" class="com-ml10" size="medium" placement="bottom-start">
      <el-button size="small">批量操作<i class="el-icon-arrow-down el-icon--right"></i></el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item><div class="com-batch-btn" @click="handleBatchDelete()"><i class="el-icon-delete"></i> 删除</div></el-dropdown-item>
        <el-dropdown-item><div class="com-batch-btn" @click="frozenAccount(2)"><i class="el-icon-lock"></i> 冻结</div></el-dropdown-item>
        <el-dropdown-item><div class="com-batch-btn" @click="frozenAccount(1)"><i class="el-icon-unlock"></i> 解冻</div></el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>

  <div class="com-check-box">
    <span class="text com-mr20">当前选择 <b>{{selection.length}}</b> 项</span>
    <el-link class="btn" type="primary" :underline="false" @click="handleClearSelection()">清空</el-link>
  </div>

  <div class="table-box">
    <el-table ref="table" :data="table.data"
      border
      size="medium"
      :header-cell-style="{'background-color': '#fafafa'}"
      row-key="id"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55"
        align="center"
        reserve-selection>
      </el-table-column>
      <template v-for="(item, index) in table.head">
        <el-table-column v-if="item.key ==  'avatar'"
          :label="item.name"
          align="center">
          <template slot-scope="scope">
            <el-avatar shape="square" size="small" fit="contain" :src="scope.row.avatar"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column v-else
          :prop="item.key"
          :label="item.name"
          :min-width="item.width"
          :sortable="item.sortable"
          :formatter="item.formatter"
          :default-sort = "{prop: 'createTime', order: 'descending'}"
          align="center">
        </el-table-column>
      </template>
      <el-table-column label="操作" align="center">
        <div class="com-td-hd-box" slot-scope="scope">
          <el-link type="primary" :underline="false" @click="$refs.userInfo.open(2, scope.row)">编辑</el-link>
          <el-dropdown size="medium" placement="bottom">
            <el-link type="primary" :underline="false">更多<i class="el-icon-arrow-down el-icon--right"></i></el-link>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item><div @click="$refs.userInfo.open(3, scope.row)">详情</div></el-dropdown-item>
              <el-dropdown-item><div @click="$refs.resetPassword.open(scope.row)">密码</div></el-dropdown-item>
              <el-dropdown-item><div @click="handleDelete(scope.row.id)">删除</div></el-dropdown-item>
              <el-dropdown-item v-if="scope.row.status == 1"><div @click="frozenAccount(2, scope.row)">冻结</div></el-dropdown-item>
              <el-dropdown-item v-if="scope.row.status == 2"><div @click="frozenAccount(1, scope.row)">解冻</div></el-dropdown-item>
              <!-- <el-dropdown-item><div>代理人</div></el-dropdown-item> -->
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-table-column>
    </el-table>
    <com-page :page="page" @change="changePage"></com-page>
  </div>

  <!-- 用户弹窗 -->
  <user-info ref="userInfo" @reload="loadData()"></user-info>
  <!-- 重新设定密码 -->
  <reset-password ref="resetPassword"></reset-password>
</div>
</template>
<script>

import userInfo from "@/dialogs/system/user/user-info.vue";
import resetPassword from "@/dialogs/system/user/reset-password.vue";

import TableMixin from "@/mixins/TableMixin.js";
import {user} from "@/config/api.js";

export default {
  name: 'system-user',
  mixins: [TableMixin],
  components: {
    userInfo,
    resetPassword,
  },
  data () {
    return {
      form: {
        username: '', // 登录账号
        sex: '', // 性别
        realname: '', // 用户昵称
        phone: '', // 手机号码
        status: '', // 用户状态
        column: 'createTime',
        order: 'desc'
      },

      // 表格
      table: {
        head: [
          {name: '用户账号', key: 'username'},
          {name: '用户姓名', key: 'realname'},
          {name: '头像', key: 'avatar'},
          {name: '手机号码', key: 'phone'},
          {name: '部门', key: 'orgCode', width: 180},
          {name: '状态', key: 'status_dictText'},
        ],
        data: []
      },

      url: {
        list: user.list,
        delete: user.delete,
        deleteBatch: user.deleteBatch
      },

    }
  },
  mounted () {
    
  },
  methods: {
    // 冻结账号，状态1解冻、2冻结，row存在单个，不存在批量
    frozenAccount (status, row) {
      var text = '', aRow = '';
      if (row) {
        text = '请确认是否' + (status == 1 ? '解冻' : '冻结') + '此账号！';
        aRow = [row];
      } else {
        text = '请确认是否' + (status == 1 ? '解冻' : '冻结') + '选中账号！';
        aRow = this.selection;
      }
      if (!aRow.length) {
        this.$message.error('请选择一条记录！');
        return;
      }
      // 验证是否存在admin
      for (var i = 0; i < aRow.length; i++) {
        var item = aRow[i];
        if (item.username == 'admin') {
          this.$message.warning('管理员账号不允许此操作！');
          return;
        }
      }
      // 调用接口
      this.$g.confirm(text).then(() => {
        var param = {
          ids: aRow.map(item => {
            return item.id
          }).join(','),
          status: status
        }
        this.$put(user.frozenBatch, param).then(res => {
          if (res.success) {
            this.$message.success(res.message);
            this.loadData();
          }
        })
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.user-list-wp {
  
}
</style>